<template>
  <div class="repair-management">
    <el-card>
      <template #header>
        <span>报修管理</span>
      </template>
      
      <el-table :data="repairs" style="width: 100%">
        <el-table-column prop="repairNo" label="报修单号" width="200" />
        <el-table-column prop="dormitory" label="宿舍楼" width="100" />
        <el-table-column prop="roomNum" label="房间号" width="100" />
        <el-table-column prop="type" label="报修类型" width="120" />
        <el-table-column prop="problem" label="问题描述" min-width="200" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag 
              :type="scope.row.status === '已处理' ? 'success' : 
                     scope.row.status === '处理中' ? 'warning' : 'danger'"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="subTime" label="提交时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.subTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button 
              v-if="scope.row.status === '未处理'"
              type="warning" 
              size="small"
              @click="updateStatus(scope.row, '处理中')"
            >
              处理中
            </el-button>
            <el-button 
              v-if="scope.row.status !== '已处理'"
              type="success" 
              size="small"
              @click="updateStatus(scope.row, '已处理')"
            >
              已处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../../utils/request'

const repairs = ref([])

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString()
}

const loadRepairs = async () => {
  try {
    const response = await request.get('/api/fix/list')
    if (response.data.code === 200) {
      repairs.value = response.data.data
    }
  } catch (error) {
    console.error('加载报修数据失败:', error)
  }
}

const updateStatus = async (repair, status) => {
  try {
    const response = await request.put('/api/fix/update', {
      ...repair,
      status
    })
    
    if (response.data.code === 200) {
      ElMessage.success('状态更新成功')
      await loadRepairs()
    }
  } catch (error) {
    ElMessage.error('状态更新失败')
  }
}

onMounted(() => {
  loadRepairs()
})
</script>

<style scoped>
.repair-management {
  padding: 0;
}
</style> 